<template>
    <view class="image-select">
        <view class="tip" @click="onImgSelect">{{tip}}</view>
        <text v-if="value===''" class="add-icon">+</text>
        <view v-else class="express-image-container">
            <img class="delete-image" src="~static/svg/icon_exit.svg" @click="deleteImage"/>
            <img :src="value" alt="" class="express-image"/>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'CardImageSelect',
        props: {
            value: {
                require: true,
                type: String
            },
            tip: {
                type: String,
                required: false,
                default: ''
            }
        },
        methods: {
            async onImgSelect() {
                const chooseResult = await uni.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera']
                });
                if (!chooseResult[0]) {
                    this.$emit('input', chooseResult[1].tempFilePaths[0]);
                }
            },
            deleteImage() {
                this.$emit('input', '');
            }
        }
    };
</script>

<style lang="scss" scoped>
@import "~styles/global.scss";

.image-select {
    @include flexCenter;
    width: px2rpx(178);
    height: px2rpx(100);
    position: relative;
    background-color: #d7d7d7;
    border-radius: px2rpx(5);

    .tip{
        position: absolute;
        width: px2rpx(170);
        height: px2rpx(92);
        font-size: px2rpx(14);
        top: px2rpx(8);
        left: px2rpx(8);
    }

    .express-image-container {
        width: 100%;
        height: 100%;
        position: relative;

        .express-image {
            width: 100%;
            height: 100%;
        }

        .delete-image {
            position: absolute;
            right: 0;
            top: 0;
            width: px2rpx(15);
            height: px2rpx(15);
            background-color: #ccc;
            color: #000;
        }
    }
}
</style>
